<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
    <link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" media="all">
    <style>
        .layui-table-cell {
            height: 60px;
            line-height: 60px;
        }
        /* height: auto !important;
          white-space: normal;
          padding: 0px;
      } */

        th .layui-table-cell {
            height: 30px;
            line-height: 30px;
        }

        th .laytable-cell-1-0-7 {
            height: 30px;
            line-height: 30px;
        }

        .layui-table img {
            width: 100px;
            height: 60px;
        }
    </style>

</head>
<body>
    <!-- 数据表格 数据由js动态渲染-->
    <table  id="workorderTable" lay-filter="test"></table>


</body>
<script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>

<!-- 这里的 checked 的状态只是演示 -->
<!-- 这里的 checked 的状态只是演示 -->
<script type="text/html" id="picTpl">
    <img src="{{d.certificates}}" name="certificates" alt="" style="width: 100%; height: 100%;">
</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="appoint">派单</a>
</script>

<script>
    var date = JSON.parse(localStorage.getItem("workorder"));
    var id = date.id;
    layui.use(['form', 'table'], function () {

        var table = layui.table,
            form = layui.form,
            $ = layui.jquery;
        
            
        // 暂时不用token
        var token = JSON.parse(localStorage.getItem("token"));

        $.ajaxSetup({
            // 发送cookie
            xhrFields: {
                withCredentials: true
            },
        })

        //渲染数据表格
        table.render({
            elem: '#workorderTable',    //  渲染的数据表格的id
            //url:'workorders.json'
            url:('http://localhost:8080/repair/appointList?id='+ id )    //数据表格的数据源 
            //,headers:{"token":token}
            , title: '维修人员'
            , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            , defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                title: '提示'
                , layEvent: 'LAYTABLE_TIPS'
                , icon: 'layui-icon-tips'
            }]
            //, contentType: "application/x-www-form-urlencoded"
            , cols: [[
                { type: 'checkbox', fixed: 'left' }
                , { field: 'id', title: 'ID', width: 100, fixed: 'left', unresize: true, sort: true }
                , { field: 'name', title: '职工姓名', width: 130, edit: 'text' }
                , { field: 'sex', title: '性别', width: 100, edit: 'text' }
                , { field: 'phone', title: '联系电话', width: 200, edit: 'text' }
                , { field: 'typeWork', title: '维修类型', width: 160, edit: 'text' }
                , { field: 'entrytime', title: '入职时间', width: 200, edit: 'text' }
                , { field: 'certificates', title: '工作证', width: 180, templet: '#picTpl' }
                , { field: 'right', title: '操作', toolbar: '#barDemo', width: 200 }
            ]]
        })
        table.on('tool(test)', function(obj){
            var data = obj.data; //获得当前行数据
            //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var layEvent = obj.event;
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
            if(layEvent === 'appoint'){ //派单
                layer.confirm('确定派单吗', function(index){
                    // 此处可以发送ajax
                    $.get("http://localhost:8080/repair/giveWork",{"personnelId":data.id,"id":id},{"id":id},function (result){
                        if (result.code == 200) {
                            layer.msg("派单成功");
                            table.reload('workorderTable');  // 派单完  重新加载下表格
                            
                        } else {
                            layer.msg("派单失败");
                        }
                    },"json");
                    layer.close(index);
                    // 关闭 弹出层
                    var iframeIndex = parent.layer.getFrameIndex(window.name);
                    parent.layer.close(iframeIndex);
                });
            }
        });
        
    })
</script>

</html>